<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				width: 80%;
				margin: 30px auto;
			}
			li{
				background: rgb(245,222,179);
				padding: 15px;
				margin-top: 15px;
				border-radius: 10px;
			}
			h3{
				margin-bottom: 10px;
			}
			span{
				display: inline-block;
				margin-top: 10px;
			}
			button{
				float: right;
				border: none;
				background: orangered;
				outline: none;
				padding: 6px 12px;
				margin-top: 5px;
				border-radius: 5px;
			}
		</style>
		<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				for(var i=0;i<$("p").length;i++){
					$("p").eq(i).attr("name",$("p").eq(i).html());
					$("p").eq(i).html($("p").eq(i).attr("name").substring(0,30)+"...");
				}
				$("button").click(function(){
					if($(this).html()=="展开"){
						$(this).html("收起");
						$(this).siblings("p").html($(this).siblings("p").attr("name"));
					}else{
						$(this).html("展开");
						$(this).siblings("p").html($(this).siblings("p").attr("name").substring(0,30)+"...");
					}
				})
			})
		</script>
	</head>
	<body>
		<ul>
			<li><h3>1.什么是区块链？</h3><p>1区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法。</p><span>2022-10-10</span><button>展开</button></li>
			<li>
				<h3>1.什么是区块链？</h3>
				<p>2区块链是分布式数据存储、点对点传输、共识机
				制、加密算法等计算机技术的新型应用模式。所谓共
				识机制是区块链系统中实现不同节点之间建立信任、
				获取权益的数学算法。
				</p>
				<span>2022-10-10</span>
				<button>展开</button>
			</li>
			<li>
				<h3>1.什么是区块链？</h3>
				<p>3区块链是分布式数据存储、点对点传输、共识机
				制、加密算法等计算机技术的新型应用模式。所谓共
				识机制是区块链系统中实现不同节点之间建立信任、
				获取权益的数学算法。
				</p>
				<span>2022-10-10</span>
				<button>展开</button>
			</li>
		</ul>
	</body>
</html>
